<template>
  <basic-container>
    <avue-crud
      v-bind="bindVal"
      :permission="permission"
      v-on="onEvent"
      v-model="form"
      :page.sync="page"
    >
      <el-button
        slot="status"
        :type="scope.row.status==0?'success':'danger'"
        slot-scope="scope"
        @click="changeStatus(scope.row)"
      >{{scope.row.status==0?'启用':'禁用'}}</el-button>
    </avue-crud>
  </basic-container>
</template>

<script>
import { list } from "@/api/permission/index.js";

export default window.$crudCommon(
  {
    data() {
      return {
        roleslist: [],
      };
    },
    created() {
      list().then((res) => {
        this.roleslist = res.data.data;
        let pullData = this.roleslist.map((item) => ({
          label: item.typeName,
          value: item.typeName,
        }));
        this.option.column.forEach((item, index) => {
          if (item.prop == "roles") {
            this.option.column[index].dicData = pullData;
          }
        });
      });
    },
    methods: {
      rowUpdate(row, index, done, loading) {
        this.roleslist.forEach((item) => {
          if (item.typeName == row.roles) {
            this.form["permission"] = item.permission;
          }
        });
        // 清除display == false的参数
        this.option.column.forEach((item) => {
          if (
            item.display == false ||
            item.editDisplay == false ||
            item.editDisabled ||
            item.disabled
          ) {
            this.form[item.prop] = null;
          }
        });
        // 提交时去除$开头的参数
        for (let key in this.form) {
          if (key.indexOf("$") != -1) {
            this.form[key] = null;
          }
        }
        const callback = () => {
          delete this.form.params;
          let pullData = {
            [this.rowKey]: row[this.rowKey],
            ...this.form,
          };
          this.api[this.option.update || "update"](pullData)
            .then((data) => {
              this.getList();
              if (this.updateAfter) {
                this.updateAfter(data);
              } else {
                this.$message.success("更新成功");
              }
              done();
            })
            .catch(() => {
              loading();
            });
        };
        if (this.updateBefore) {
          this.updateBefore();
        }
        callback();
      },
      rowSave(row, done, loading) {
        this.roleslist.forEach((item) => {
          if (item.typeName == row.roles) {
            this.form["permission"] = item.permission;
          }
        });
        // 清除display == false的参数
        this.option.column.forEach((item) => {
          if (
            item.display == false ||
            item.addDisplay == false ||
            item.addDisabled ||
            item.disabled
          ) {
            this.form[item.prop] = null;
          }
        });
        // 提交时去除$开头的参数
        for (let key in this.form) {
          if (key.indexOf("$") != -1) {
            this.form[key] = null;
          }
        }
        const callback = () => {
          delete this.form.params;
          this.api[this.option.add || "add"](this.form)
            .then((data) => {
              this.getList();
              if (this.addAfter) {
                this.addAfter(data);
              } else {
                this.$message.success("新增成功");
              }
              done();
            })
            .catch(() => {
              loading();
            });
        };
        if (this.addBefore) {
          this.addBefore();
        }
        callback();
      },
      changeStatus(row) {
        this.api
          .disable({ status: Number(!row.status), uid: row._id })
          .then((res) => {
            console.log(res);
            if (res.data.updated > 0) {
              row.status = !row.status;
            }
          });
      },
    },
  },
  {
    name: "permission/account", //模块名字
    list: "list", //列表接口名字
    update: "update", //更新接口名字
    add: "add", //新增接口名字
    del: "del", //删除接口名字
    rowKey: "_id", //后台返回的主键
    pageNumber: "pageNumber", //页码
    pageSize: "pageSize", //页数
    res: (data) => ({ data: data.data, total: data.total }), //列表的结构
    total: "total", //总页数
    data: "data", //列表属性
    role: {
      addBtn: "top-permission-2-addBtn",
      editBtn: "top-permission-2-editBtn",
      delBtn: "top-permission-2-delBtn",
    },
  }
);
</script>
<style lang="scss" scoped>
</style>